import React, { Component } from 'react';
import './style/Cover.less';
import "antd/dist/antd.css";
import { Link } from 'react-router-dom';

class Cover extends Component{
    constructor(props){
        super(props);
        this.state = {
            width:`${document.documentElement.clientWidth}px`,
            height:`${document.documentElement.clientHeight}px`,
            widthnum: document.documentElement.clientWidth,
            footerHeight:`${document.documentElement.clientHeight*0.9-30}px`
        }
    }

    componentDidMount(){
        window.addEventListener('resize',this.handleHeigt.bind(this))
    }

    componentWillUnmount(){
        window.removeEventListener('resize',this.handleHeigt.bind(this))
    }

    handleHeigt = ()=>{
        const screenHeight = document.documentElement.clientHeight;
        const screenWidth = document.documentElement.clientWidth;
        let height = `${screenHeight}px`;
        let width = `${screenWidth}px`;
        let widthnum = screenWidth;
        let footerHeight = document.documentElement.clientHeight<=600? `${document.documentElement.clientHeight - 20}px`:`${document.documentElement.clientHeight*0.9-10}px`
        this.setState({
            height,width,
            widthnum,
            footerHeight
        })
    }

    openUrl = ()=>{
        const w=window.open('about:blank');
        w.location.href='https://ankicoo.gitee.io'; 
    }

    openBlog = ()=>{
        const w=window.open('about:blank');
        w.location.href='https://ankicoo.gitee.io'; 
    }

    openGitee = ()=>{
        const w=window.open('about:blank');
        w.location.href='https://gitee.com/ankicoo'; 
    }

    openJianshu = ()=>{
        const w=window.open('about:blank');
        w.location.href='https://www.jianshu.com/u/8b8511b8bc10'; 
    }

    openCsdn = ()=>{
        const w=window.open('about:blank');
        w.location.href='https://blog.csdn.net/qq_35313767'; 
    }

    
    render(){
        return(
            <div className = "outer" style= {{height:this.state.height, width :this.state.width,minHeight:'600px',minWidth:'250px'}}>
                <div className='center' style= {{height:this.state.footerHeight ,width :this.state.width,minHeight:'520px',minWidth:'50px'}}>
                    
                    <div className='avatar'/>
                    <div className = 'name'>
                        <a  onClick={this.openUrl} >{"元气阿超"}</a>
                    </div>
                    <div className = 'quotations'>
                        用双脚丈量土地，将未知变为知识
                    </div>
                    {
                        this.state.widthnum<520?
                        <div className = 'btnsMobile' >
                            <a href="https://ankicoo.gitee.io" >博客</a>
                            <a href="https://gitee.com/ankicoo" >码云</a>
                            <a href="https://www.jianshu.com/u/8b8511b8bc10" >简书</a>
                            <a href="https://blog.csdn.net/qq_35313767" >CSDN</a>
                            <Link  to={{pathname:`/Navigation`}}  >关于</Link>
                        </div>
                        :
                        <div className = 'btns' >
                            <div className = 'btn' ><a href="https://ankicoo.gitee.io" >博客</a></div>
                            <div className = 'btn' ><a href="https://gitee.com/ankicoo" >码云</a></div>
                            <div className = 'btn' ><a href="https://www.jianshu.com/u/8b8511b8bc10" >简书</a></div>
                            <div className = 'btn' ><a href="https://blog.csdn.net/qq_35313767" >CSDN</a></div>
                            <div className = 'btn' ><Link  to={{pathname:`/Navigation`}}  >关于</Link></div>
                        </div>
                    }
                    
                </div>
                <div className='copyright' >
                    <a>CopyRight © 2022 ankicoo</a> 
                </div>
            </div>
        )
    }
}
export default Cover;

